<template>
    <!-- 产品内容 -->
    <div id="product">
      <div id="product-all" class="clearfix">

        <div  class="product-con clearfix" v-for="(item,index) in indexData" :key="index">
          <!-- 鼠标悬浮出现元素 -->
          <div class="product-copy">
            <div class="copy-button">
              <div class="copy-button-con tag-read"
                @click="clickCopy(index)"  data-clipboard-target="#foo" v-show="!copy">点击复制文案</div>
              <div class="copy-button-con" v-show="copy">已复制文案</div>
            </div>
            <!-- 鼠标悬浮出现元素3 -->
            <div class="showCopyText">
              <div class="triangle-left"></div>
              <div class="copyTextCon">
                <div class="copy-img">
                  <img :src="item.goods_thumbnail_url" alt="">
                </div>
                <div class="copy-all-text">
                  <p>商品名称：{{item.goods_name}}</p>
                  <p>销售数量：{{item.sales_tip}}</p>
                  <p>优惠劵剩余:{{item.coupon_remain_quantity}}</p>
                  <p>店铺：{{item.mall_name}}</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 产品序号 -->
          <div class="product-num" v-show="navIndex!=4">
            <!-- 序号背景图 -->
            <div class="product-num-bg">
              <img src="../img/榜单.png" alt="">
            </div>
            <!-- 序数 -->
            <div class="product-num-text">
              {{(pageIndex*20+index)-20+1}}
            </div>
          </div>
          <!-- 产品图片 -->
          <div class="product-img-aa">
            <div class="img-aa-con" @click="toDD(item.goods_id)">
              <img :src="item.goods_thumbnail_url" alt="">
            </div>
          </div>
          <!-- 产品文案 -->
          <div class="product-text" >
            <!-- <input id="foo" v-model="item.goods_name" type="text"> -->
            <p id="foo" :title="item.goods_name">{{item.goods_name}}</p>
          </div>
          <!-- 产品标题 v-show='navIndex!=4'-->
          <div class="time-count" v-show='navIndex!=4 && navIndex!=5' >
            <div class="time-count-bg">
              <img src="../img/销售数量背景.png" alt="">
            </div>
            <div class="time-count-h3">
              <div v-show="navIndex==1">近24小时销售<span class="time-count-h3-num">{{item.sales_tip}}</span>件</div>
              <div v-show="navIndex==2">昨日销售<span class="time-count-h3-num">{{item.sales_tip}}</span>件</div>
              <div v-show="navIndex==3">近24小时领券<span class="time-count-h3-num">{{item.sales_tip}}</span>张</div>
            </div>
          </div>

          <!-- 设置定位 -->
          <div class="product-dingwei">
              <!-- 鼠标悬浮出现元素2 -->
              <div class="product-copy-text">
                <div class="copy-text">
                  <div class="copy-text-con">
                    <p>优惠劵剩余:<span>{{item.coupon_remain_quantity}}</span></p>
                    <p >店铺：<span>{{item.mall_name}}</span></p>
                    <p>放单人:<span>耗子</span></p>
                  </div>
                </div>
              </div>
          </div>

          <!-- 进度条 -->
          <div class="percentage">
            <div class="percentage-con">
              <el-progress :text-inside="true" :stroke-width="3" :percentage="70" status="exception"></el-progress>
              <!-- <el-progress :percentage="70"></el-progress> -->
            </div>
          </div>
          <!-- 产品数据 -->
          <div class="product-count">
            <!-- 价格 -->
            <div class="count-price">
              <span class="count-price-text1">劵后价</span><br>
              <span class="count-price-text2">￥{{item.goods_postCouponPrice/100}}</span>
            </div><br>
            <!-- 分割线 -->
            <div class="middle-line">
              <div class="middle-line-con"></div>
            </div>
            <!-- 计划进度 -->
            <div class="count-percent">
              <span class="count-percent-text1">佣金比例</span><br>
            <span class="count-percent-text2">{{item.promotion_rate/100}}%</span>
            </div>
          </div>
          <!-- 分割线 -->
          <div class="count-line">
          </div>
          <!-- 底部数据 优惠劵 -->
          <div class="product-bottom">
            <div class="bottom-price">
              <div class="price-left">
                劵
              </div>
              <div class="price-right">
                ￥{{item.coupon_discount/100}}
              </div>
            </div>
            <div class="bottom-num">
              <div>已拼{{item.sales_tip/1000}}万件</div>
            </div>
          </div>
        </div>

      </div>
       
    </div>
</template>

<script>

import '../scss/product.scss';
// 引入复制文本
import Clipboard from 'clipboard';

export default {
  
  created () {
    // 第一次加载，获取缓存数据
    var getToken = this.ApiCookie.getCookie('data');
    // 判断如果有
    if(getToken){  // 假设有缓存
        this.token = getToken;
    }
    this.productData = this.indexData;
    console.log('保存产品数据',this.productData)
    this.allgoodsIndex = this.goodsIndex;
    console.log('获取下标',this.allgoodsIndex);
    
  },
  props:['navIndex','indexData','pageIndex'],
  data () {
    return {
      // 保存token
      token:'',
      getMsgText:false,
      // 点击复制文字
      copy:false,
      // 商品排序下标
      allgoodsIndex:'',
      // 商品总数据
      productData:'',
      // 图片链接
      imgurl:'https://mobile.yangkeduo.com/goods2.html',
      title:'',
      myindex:'',
      
    }
  },
  computer:{

  },
  methods: {
    // 跳转到多多进宝页面产品 https://mobile.yangkeduo.com/goods2.html?goods_id=6618288628
    toDD(e){
      // window.location.href = 'https://mobile.yangkeduo.com/goods2.html?goods_id='+e;
      window.open(('https://mobile.yangkeduo.com/goods2.html?goods_id='+e));
      console.log('hahahah');
    },
    // 复制函数
    clickCopy(index){
      this.copy=true;
      var Url = this.indexData[index].goods_name;
      var clipboard = new Clipboard('.tag-read', {
            text: function() {
                return Url;
            }
          })
          clipboard.on('success',e => {
            console.log('复制成功')
            // 释放内存
            clipboard.destroy()
            })
            clipboard.on('error', e => {
            // 不支持复制
            console.log('该浏览器不支持自动复制')
            // 释放内存
            clipboard.destroy()
          })

      // 判断如果复制成功将在1秒钟后恢复
      if(this.copy){
        setTimeout(() => {
          this.copy = false
        }, 1000);
      }
    },
    // 点击复制文案
    clickCopy2(index){
      console.log('点击的下标',index);
      this.copy=true;
      this.copyText();
      // 判断如果复制成功将在1秒钟后恢复
      if(this.copy){
        setTimeout(() => {
          this.copy = false
        }, 1000);
      }
    },
    getMsg(){
    },
    setMsg(){
    },
  },
  watch:{
    productData(newValue,oldValue){
         
    },
    numId(){
      
    }
  }
  
}
</script>

